<template>
  <div class="case_page">
    <!-- 导航 开始 -->
    <nav-bar title="查案例"></nav-bar>
    <!-- 导航 end -->

    <!-- 菜单 开始 -->
    <div class="menu_box">
      <div
        class="menu_cell"
        :class="caseTypeId == item.id ? 'menu_active' : ''"
        v-for="(item, index) in menus"
        :key="index"
        @click="menuEvent(item)"
      >
        <div class="name">{{ item.name }}</div>
        <div class="sub">{{ item.sub }}</div>
      </div>
    </div>
    <!-- 菜单 end -->

    <!-- 筛选项 开始 -->
    <div class="filter_box">
      <van-dropdown-menu class="dropdown_menu" active-color="#3388ff">
        <van-dropdown-item
          class="dropdown_menu_item"
          v-model="toothConditions"
          :options="teethList"
          @change="onChange"
        />
        <van-dropdown-item
          class="dropdown_menu_item"
          v-model="treatmentMethod"
          :options="treatmentList"
          @change="onChange"
        />
        <van-dropdown-item
          class="dropdown_menu_item"
          v-model="gender"
          :options="GENDER_OPTIONS"
          @change="onChange"
        />
        <van-dropdown-item
          class="dropdown_menu_item"
          v-model="age"
          :options="AGE_OPTIONS"
          @change="onChange"
        />
        <van-dropdown-item
          class="dropdown_menu_item drop_menu_all"
          title="全部条件"
          ref="allFilter"
        >
          <div class="all_options">
            <div class="options_list">
              <div class="category">
                <h2 class="h2">矫正案例</h2>
                <div class="list_box">
                  <template v-for="(item, index) in menus">
                    <div
                      class="cell"
                      :class="caseType == item.name ? 'cell_active' : ''"
                      :key="index"
                      v-if="item.id"
                      @click="chooseCaseType(item)"
                    >
                      {{ item.name }}
                    </div>
                  </template>
                </div>
              </div>

              <div class="category">
                <h2 class="h2">牙齿情况</h2>
                <div class="list_box">
                  <template v-for="(item, index) in teethList">
                    <div
                      class="cell"
                      :class="toothConditions == item.text ? 'cell_active' : ''"
                      :key="index"
                      v-if="item.value"
                      @click="onChoose('toothConditions', item.text)"
                    >
                      {{ item.text }}
                    </div>
                  </template>
                </div>
              </div>

              <div class="category">
                <h2 class="h2">治疗方案</h2>
                <div class="list_box">
                  <template v-for="(item, index) in treatmentList">
                    <div
                      class="cell"
                      :class="treatmentMethod == item.text ? 'cell_active' : ''"
                      :key="index"
                      v-if="item.value"
                      @click="onChoose('treatmentMethod', item.text)"
                    >
                      {{ item.text }}
                    </div>
                  </template>
                </div>
              </div>

              <div class="category">
                <h2 class="h2">使用材料</h2>
                <div class="list_box">
                  <template v-for="(item, index) in materialList">
                    <div
                      class="cell"
                      :class="materialsUsed == item.text ? 'cell_active' : ''"
                      :key="index"
                      v-if="item.value"
                      @click="onChoose('materialsUsed', item.text)"
                    >
                      {{ item.text }}
                    </div>
                  </template>
                </div>
              </div>

              <div class="category">
                <h2 class="h2">治疗周期</h2>
                <div class="list_box">
                  <template v-for="(item, index) in CLUE_CYCLE_OPTIONS">
                    <div
                      class="cell"
                      :class="treatmentCycle == item.value ? 'cell_active' : ''"
                      :key="index"
                      v-if="item.value"
                      @click="onChoose('treatmentCycle', item.value)"
                    >
                      {{ item.text }}
                    </div>
                  </template>
                </div>
              </div>

              <div class="category">
                <h2 class="h2">性别</h2>
                <div class="list_box">
                  <template v-for="(item, index) in GENDER_OPTIONS">
                    <div
                      class="cell"
                      :class="gender == item.value ? 'cell_active' : ''"
                      :key="index"
                      v-if="item.value"
                      @click="onChoose('gender', item.value)"
                    >
                      {{ item.text }}
                    </div>
                  </template>
                </div>
              </div>

              <div class="category">
                <h2 class="h2">年龄</h2>
                <div class="list_box">
                  <template v-for="(item, index) in AGE_OPTIONS">
                    <div
                      class="cell"
                      :class="age == item.value ? 'cell_active' : ''"
                      :key="index"
                      v-if="item.value"
                      @click="onChoose('age', item.value)"
                    >
                      {{ item.text }}
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </div>
          <div class="btn_group">
            <button class="btn" @click="rest()">重置</button>
            <button class="btn btn_primary" @click="saveFilter">完成</button>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
    <!-- 筛选项 end -->

    <!-- 案例列表 开始 -->
    <div class="case_list">
      <template v-if="caseList && caseList.length">
        <div class="left">
          <UserCase
            v-for="(item, index) in caseLeftList"
            :key="`l_${index}`"
            :info="item"
          ></UserCase>
        </div>
        <div class="right">
          <UserCase
            v-for="(item, index) in caseRightList"
            :key="`r_${index}`"
            :info="item"
          ></UserCase>
        </div>
      </template>
      <no-data v-else></no-data>
    </div>
    <!-- 案例列表 end -->
  </div>
</template>
<script>
import { DropdownMenu, DropdownItem } from "vant";
import {
  TEETH_CONDITION,
  GENDER_OPTIONS,
  TREATMENT_OPTIONS,
  AGE_OPTIONS,
  CASE_MENUS,
  MATERIAL_OPTIONS,
  CLUE_CYCLE_OPTIONS,
  TEETH_LIST_CONDITION,
  MATERIAL_LIST_OPTIONS,
  TREATMENT_LIST_OPTIONS,
} from "@/utils/constants.js";
import UserCase from "@/components/case/index.vue";
import {
  PLATFORM_TYPE,
  GET_ORALCAVITYCASE_SEARCH,
  GET_SEO_SETTING_INFO,
} from "@/http/interface";
export default {
  components: {
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    UserCase,
  },
  data() {
    return {
      menus: CASE_MENUS,
      menuActive: 1,
      form: { teeth: "", age: "", gender: "", cure: "" },

      teethList: TEETH_CONDITION,
      treatmentList: TREATMENT_OPTIONS,
      materialList: MATERIAL_OPTIONS,

      GENDER_OPTIONS,
      AGE_OPTIONS,
      CLUE_CYCLE_OPTIONS,
      caseList: [],
      caseType: "全部案例",
      caseTypeId: "",
      toothConditions: "",
      treatmentMethod: "",
      gender: "",
      age: "",
      materialsUsed: "",
      treatmentCycle: "",
      caseLeftList: [], // 瀑布流左侧列表
      caseRightList: [], // 瀑布流右侧列表
      seoInfo: {},
    };
  },
  watch: {
    caseList: {
      handler: function (n) {
        this.caseList = n;
      },
      immediate: true,
    },
    teethList: {
      handler: function (n) {
        this.teethList = n;
      },
      immediate: true,
    },
    treatmentList: {
      handler: function (n) {
        this.treatmentList = n;
      },
      immediate: true,
    },
    materialList: {
      handler: function (n) {
        this.materialList = n;
      },
      immediate: true,
    },
  },
  head() {
    return {
      title: this.seoInfo.title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.seoInfo.description,
        },
        {
          hid: "Keywords",
          name: "Keywords",
          content: this.seoInfo.keywords,
        },
      ],
      link:[
        {ref:'canonical',href:`${this.$domain}/inquire/case`}
      ]
    };
  },
  watchQuery: true,
  async asyncData({ query, $axios }) {
    let params = { pageNumber: 1, pageSize: 10000 };
    let caseType = decodeURI(query.caseType || "");
    let toothConditions = decodeURI(query.toothConditions || "");
    let treatmentMethod = decodeURI(query.treatmentMethod || "");
    let gender = decodeURI(query.gender || "");
    let age = decodeURI(query.age || "");
    let materialsUsed = decodeURI(query.materialsUsed || "");
    let treatmentCycle = decodeURI(query.treatmentCycle || "");

    let caseTypeId = query.caseTypeId || "";
    let teethList = TEETH_LIST_CONDITION[caseTypeId || 1];
    let treatmentList = TREATMENT_LIST_OPTIONS[caseTypeId || 1];
    let materialList = MATERIAL_LIST_OPTIONS[caseTypeId || 1];

    params.caseType = query.caseType != "全部案例" ? query.caseType : "";
    params.toothConditions = toothConditions;
    params.treatmentMethod = treatmentMethod;
    params.gender = gender;
    params.age = age;
    params.materialsUsed = materialsUsed;
    params.treatmentCycle = treatmentCycle;

    let res = await $axios.get(GET_ORALCAVITYCASE_SEARCH, { params: params });
    let obj = res.data || {};
    let caseList = obj.list || [];
    let caseLeftList = [];
    let caseRightList = [];
    caseList.map((k, i) => {
      if (i % 2 == 0) {
        caseLeftList.push(k);
      } else {
        caseRightList.push(k);
      }
    });

    // 获取seo配置
    let seo = await $axios.get(GET_SEO_SETTING_INFO, {
      params: { type: 6, platform: PLATFORM_TYPE },
    });
    let seoInfo = seo.data || {};

    return {
      caseList,
      caseLeftList,
      caseRightList,
      caseType,
      caseTypeId,
      toothConditions,
      treatmentMethod,
      gender,
      age,
      treatmentCycle,
      materialsUsed,
      teethList,
      treatmentList,
      materialList,
      seoInfo,
    };
  },
  methods: {
    // 菜单点击事件
    menuEvent(row) {
      this.caseType = row.name;
      this.caseTypeId = row.id;
      this.onChange();
    },

    // 重置
    rest() {
      this.caseType = "";
      this.toothConditions = "";
      this.treatmentMethod = "";
      this.gender = "";
      this.age = "";
      this.treatmentCycle = "";
      this.materialsUsed = "";
      this.onChange();
      this.$refs.allFilter.toggle();
    },

    // 筛选条件点击事件
    onChoose(id, e) {
      this[id] = e;
    },

    // 监听筛选条件改变
    onChange() {
      let params = this.$route.query;
      console.log(params);
      this.$router.replace({
        path: "/inquire/case",
        query: {
          ...params,
          caseType: this.caseType,
          toothConditions: encodeURI(this.toothConditions),
          treatmentMethod: encodeURI(this.treatmentMethod),
          gender: encodeURI(this.gender),
          age: encodeURI(this.age),
          treatmentCycle: encodeURI(this.treatmentCycle),
          materialsUsed: encodeURI(this.materialsUsed),
          caseTypeId: this.caseTypeId,
        },
      });
    },

    // 保存筛选条件
    saveFilter() {
      this.$refs.allFilter.toggle();
      this.onChange();
    },

    // 切换案例
    chooseCaseType(row) {
      console.log(row);
      this.caseType = row.name;
      this.caseTypeId = row.id;
      // this.teethList = TEETH_LIST_CONDITION[id]
      // this.treatmentList = TREATMENT_LIST_OPTIONS[id]
      // this.materialList = MATERIAL_LIST_OPTIONS[id]
      this.toothConditions = "";
      this.treatmentMethod = "";
      this.materialsUsed = "";
      this.onChange();
    },
  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/inquire/case.less";
</style>